<!-- 翻页表格组件 -->

<template>
  <a-modal
    width="33%"
    :visible="visible"
    title-align="center"
    @cancel="handleCancel"
    @ok="handleOk"
    unmount-on-close
  >
    <template #title>
      {{ `${props.dataList.id ? '编辑' : '新增'}组织类型` }}
    </template>
    <a-form :model="form" auto-label-width :rules="rules" ref="refForm">
      <a-form-item
        field="name"
        label="组织类型名称："
        validate-trigger="input"
        required
      >
        <a-input
          :style="{ width: '300px' }"
          v-model="form.name"
          placeholder="请输入内容"
        />
      </a-form-item>
      <a-form-item
        field="node"
        label="组织节点："
        validate-trigger="input"
        required
      >
        <a-radio-group v-model="form.node">
          <a-radio v-for="item in nodeList" :value="item" :key="item">{{
            item
          }}</a-radio>
        </a-radio-group>
      </a-form-item>
      <!-- <a-form-item label="是否为独立法人：" required>
        <a-radio-group v-model="form.isLegalPerson">
          <a-radio :value="1">是</a-radio>
          <a-radio :value="2">否</a-radio>
        </a-radio-group>
      </a-form-item> -->
      <a-form-item label="启用状态：" required>
        <a-switch
          v-model="form.status"
          :checked-value="1"
          :unchecked-value="2"
        />
      </a-form-item>
      <a-form-item label="描述：">
        <a-textarea
          v-model="form.description"
          :auto-size="{
            minRows: 2,
            maxRows: 5
          }"
          style="margin-top: 20px"
        />
      </a-form-item>
    </a-form>
    <template #footer>
      <a-button @click="handleCancel">取消</a-button>
      <a-button type="primary" @click="handleOk" :loading="store.isLoading"
        >确定</a-button
      >
    </template>
  </a-modal>
</template>

<script lang="ts" setup>
import { reactive, ref, Ref, defineExpose, computed } from 'vue';
import { AmendFormData } from '@/types/order';
import {
  OrganizationPatternAmend,
  OrganizationPatternNewly,
  CheckOrganizationType
} from '@/apis/management/organization/baseSetting/organizationalType/index';
import { cloneDeep } from 'lodash';
import { validateRules } from '@/utils/common';
import useGlobalParametersStore from '@/store/modules/globalParameters';

const props = withDefaults(
  defineProps<{
    visible: boolean; // 是否显示对话框
    dataList: AmendFormData; // 选中的信息
  }>(),
  {
    visible: false
  }
);
const emit = defineEmits(['update:visible', 'addRecordEmit']);

const store = useGlobalParametersStore();
const router = useRouter();

let form = ref({
  name: '', // 组织类型
  node: '公司', // 组织节点
  status: 1, // 是否启用
  description: '' // 描述
});

// 组织节点列表写死
const nodeList = ['公司', '部门', '门店'];
let refForm = ref();

watch(
  () => props.visible,
  (newVal: boolean) => {
    if (newVal) {
      if (props.dataList.id) form.value = cloneDeep(props.dataList);
    } else {
      form.value = {
        name: '', // 组织类型
        node: '公司', // 组织节点
        status: 1, // 是否启用
        description: '' // 描述
      };
    }
  }
);

// 校验名字查重
const validateName = async (val: string, cb: any) => {
  try {
    if (val === props.dataList.name && form.value.id) {
      //
    } else {
      const data = {
        name: val
      };
      const res = await validateRules(CheckOrganizationType, data);
      if (res.code > 200) {
        cb(`${res.msg}`);
      }
    }
  } catch (error: unknown) {
    console.log(error);
  }
};

const rules = {
  name: [
    {
      required: true,
      message: '请填写'
    },
    {
      validator: validateName
    }
  ],
  node: [
    {
      required: true,
      message: '请选择'
    }
  ]
};

// 编辑和新增弹框的确定按钮
const handleOk = async () => {
  if (await refForm.value.validate()) {
    return;
  } else {
    emit('addRecordEmit', form.value);
    emit('update:visible', false);
  }
};
const handleCancel = () => {
  emit('update:visible', false);
};
</script>

<style scoped lang="less"></style>
